<script setup lang="ts">
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { navigateTo } from '@uni-helper/uni-promises'
import { getPaymentRecordList } from '@/api/pay'
import type { PaymentRecordDto } from '@/api/pay/type'
import user from '@/composables/user'
import { SalaryTypeEnum } from '@/constant/enum'

const list = ref<PaymentRecordDto[]>([] as PaymentRecordDto[])

const toBePaid = ref(0)

const totalMoney = ref(0)

const optionData = ref({})

async function onToDetail(item: PaymentRecordDto) {
    const pathMap = {
        [SalaryTypeEnum.advance]: '/package-mine/pages/advance-details/advance-details',
        // [SalaryTypeEnum.salary]: '/package-mine/pages/preview-detail/preview-detail',
        [SalaryTypeEnum.salary]: '/package-mine/pages/salary-list-details/salary-list-details',
    }
    const res = await navigateTo({
        url: pathMap[item.salaryComeForm as keyof typeof pathMap],
    })
    res.eventChannel.emit('extraData', {
        id: item.salaryComeForm === SalaryTypeEnum.salary ? item.id : item.applyId,
        isCollectOpenBankAddress: item.isCollectOpenBankAddress,
        isCollectOpenBankName: item.isCollectOpenBankName,
        isCollectOpenBankCity: item.isCollectOpenBankCity,
        isCollectBankCardImg: item.isCollectBankCardImg,
    })
}

async function getList() {
    const res = await getPaymentRecordList({})
    list.value = res?.record || []
    totalMoney.value = res?.totalMoney || 0
    toBePaid.value = res?.record?.reduce((prev, cur) => {
        return prev + cur.paymentAmount
    }, 0)
}

function onGoPath() {
    navigateTo({
        url: '/package-mine/pages/salary-details/salary-details',
    })
}

onLoad((options) => {
    optionData.value = options || {}
})

onMounted(async () => {
    console.log('isLogin', user, user.isLogin.value)
    await user.waitLogin().catch((err) => {
        console.log('err', err)
        if ((optionData.value as AnyObject)?.from === 'msg')
            // uni.switchTab({ url: '/pages/mine/mine' })
            goRegisterAndBack(true, '/package-mine/pages/salary/salary')
        throw new Error('用户未登录')
    })
    if (user.isLogin.value)
        getList()
})
</script>

<template>
    <NavbarContainer nav-color="#fff" background="#3E5FF5">
        <view class="h-full flex flex-col">
            <view class="mb-20rpx box-border px-60rpx">
                <view class="mt-30rpx flex items-center justify-between">
                    <view>
                        <view class="text-xs text-white text-opacity-50">总收入（元）</view>
                        <view class="mt-10rpx text-72rpx text-white font-bold">{{ totalMoney }}</view>
                    </view>
                    <view class="details" @click="onGoPath">
                        <view class="details-view">查看明细</view>
                        <img src="../../../static/images/home/more.png" class="app-go-icon">
                    </view>
                </view>
            </view>
            <view class="box-border w-full flex-1 rounded-lt-24rpx rounded-rt-24rpx bg-white p-40rpx">
                <view class="mb-30rpx w-full pt-20rpx text-#9497B1 font-600">待领工资 ¥{{ toBePaid }}</view>
                <view v-if="list.length">
                    <view v-for="(item) in list" :key="item.id"
                          class="pos-relative mb-39rpx box-border w-full flex justify-between rounded-16rpx bg-#FAFAFC p-30rpx">
                        <view v-if="item.salaryComeForm === SalaryTypeEnum.salary"
                              class="bg-image1 pos-absolute left--6rpx top-30rpx h-43rpx w-72rpx flex items-center justify-center text-20rpx text-#ffffff">
                            发薪
                        </view>
                        <view v-if="item.salaryComeForm === SalaryTypeEnum.advance"
                              class="bg-image2 pos-absolute left--6rpx top-30rpx h-43rpx w-72rpx flex items-center justify-center text-20rpx text-#ffffff">
                            预支
                        </view>
                        <view class="ml-50rpx flex-1">
                            <view class="w-10em overflow-hidden text-ellipsis text-nowrap font-700">
                                {{ item.serveCompanyName }}
                            </view>
                            <view class="mt-20rpx text-24rpx text-#9497B1">
                                本次可提现：<span class="text-28rpx text-#FF7642">¥ {{
                                    item.paymentAmount }}</span>
                            </view>
                        </view>
                        <view class="flex flex-col items-end justify-center">
                            <view class="text-24rpx text-#9497B1">{{ dayjs(item.payTime).format('YYYY-MM-DD') }}</view>
                            <view
                                class="mt-20rpx h-60rpx w-170rpx flex items-center justify-center rounded-72rpx bg-#FF7642 text-24rpx text-#ffffff"
                                @click="onToDetail(item)">
                                提现
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view class="mt-200rpx text-center text-lightgray">暂无数据</view>
                </view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.bg-image1 {
    background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager36c1d1b0-4d7c-4b74-806c-7f9f1f85304d.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.bg-image2 {
    background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager5ddfcf89-c866-4b84-bb03-45b230a26dea.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.bg-ball {
    background: url('../static/images/mine/wait-price-bg.png') no-repeat;
    background-size: contain;
    width: 300rpx;
    height: 300rpx;
    margin-right: -20rpx;
}

.details {
    width: 189rpx;
    height: 60rpx;
    background: #73A2FF;
    border-radius: 60rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.details-view {
    font-size: 24rpx;
    color: #FFFFFF;
    margin-bottom: 5rpx;
    padding-left: 20rpx;
}

.app-go-icon {
    width: 38rpx;
    height: 38rpx;
    top: 94rpx;
    left: 40rpx;
}
</style>

<route lang="json">
{
    "style": {
        "navigationBarTextStyle": "white"
    }
}
</route>
